<template>
  <h2>name:{{person.name}}</h2>
  <h2>age:{{person.age}}</h2>
  <button @click="updateName">changeName</button>
</template>

<script>
import { reactive, toRef } from "vue";
export default {
  name: "App",
  setup() {
    const person = reactive({
      name: "harry",
      age: 28
    });
    console.log(person); // Proxy {name: 'harry', age: 28}

    // 从响应式数据中解构出的数据不再是响应式了，不可以再次修改
    // let { name } = person;
    // console.log(name); // harry

    // 通过toRef来将响应式对象中的某一项拿出来，保证拿出来的数据还是响应式
    const name = toRef(person, "name");
    console.log(name);
    // ObjectRefImpl {_object: Proxy, _key: 'name', _defaultValue: undefined, __v_isRef: true}

    // 修改name
    function updateName() {
      // 这里修改ref包裹的值所对应的变量，要通过“.value”来修改
      // 如果没有，会报一个应使用let代替const的错误。且修复了也没有效果
      name.value = "iKun";
    }

    return {
      person,
      updateName
    };
  }
};
</script>

<style>
</style>